import React, {useEffect, useState} from 'react'
import {Button, Modal, notification, Table} from "antd";
import {
    DeleteOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
    UploadOutlined
} from "@ant-design/icons";
import axios from "axios";
const { confirm } = Modal;
export default function NewsDraft(props) {
    const [draftList,setDraftList]=useState([])
    const{username}=JSON.parse(localStorage.getItem("token"))
    useEffect(()=>{
        axios.get(`/news?author=${username}&auditState=0&_expand=category`).then(res=>{//不需要请求所有的新闻数据再去筛选，请求时就附加条件
            setDraftList([
                ...res.data
            ])
        })
    },[username])

    const handleDelete = (item)=>{
        confirm({
            title: '确认',
            icon: <ExclamationCircleOutlined />,
            content: '是否删除该新闻？',
            okText: '是',
            okType: 'danger',
            cancelText: '否',
            onOk() {
                // console.log(item)
                setDraftList([...draftList.filter(data=>data.id!==item.id)])
                axios.delete(`/news/${item.id}`)
            },
            onCancel() {
            },
        });
    }
    const handleCheck = (item) => {//提交按钮的回调函数
      axios.patch(`/news/${item.id}`,{
          "auditState":1
      }).then(res=>{
          props.history.push("/audit-manage/list")
          notification.info({
              message: "通知",
              description:
                  `您可以在审核列表中查看新闻`
          });
      })
    }
    const columns = [
        {
            title: 'id',
            dataIndex: "id",
            render(id) {
                return <b>{id}</b>
            },
        },
        {
            title:'新闻标题',
            dataIndex:'title',
            render(title,item) {
                return <a href={`/#/news-manage/preview/${item.id}`}>{title}</a>;
                //使用a标签锚点进行路由跳转
                //title、item是可以拿到的
            }
        },
        {
            title:'作者',
            dataIndex:'author'
        },
        {
            title:'新闻分类',
            // dataIndex:'category.title'   失败  如何取对象中的属性作为index?如下
            dataIndex: 'category',
            render(category) {
                return category.title;
            }
        },
        {
            title:'操作',
            render(item){
                return <div>
                    <Button shape="circle"  icon={<EditOutlined />}
                            onClick={()=>props.history.push(`/news-manage/update/${item.id}`) }/>
                    <Button shape="circle" type="primary" danger icon={<DeleteOutlined/>}
                            onClick={()=>handleDelete(item)}  />
                    <Button shape="circle" type="primary" icon={<UploadOutlined/>}
                            onClick={()=>{handleCheck(item)} }/>
                </div>
            }
        }
    ]
    return (
        <div>
            <Table columns={columns} dataSource={draftList} rowKey={item=>item.id} pagination={{pageSize:7}}></Table>
        </div>
    )
}
